<template>
   <div>
    <Breadcrumb first='商品管理' second='商品分类'></Breadcrumb>
    <el-card class="box-card">
        <el-button type="primary">添加分类</el-button>
        <!-- 表格 -->
            <zk-table
              ref="table"
              sum-text="sum"
              index-text="#"
              :data="data"
              :show-index="true"
              :columns="columns"
              :expand-type="props.expandType"
              :selection-type="props.selectionType">
              <template slot="level"
                  scope="scope">
                <i v-if="!scope.row.cat_deleted"
                  class="el-icon-success"></i>
                <i v-else
                  class="el-icon-circle-close"></i>
              </template>
              <template slot="likes" label>
                <el-button type="primary">主要按钮</el-button>
              </template>
            </zk-table>
        <!-- 表格 -->

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
        <!-- 分页 -->
    </el-card>
   </div>
</template>
<script>
import { categoriesApi } from '@/api'
export default {
  async created () {
    const res = await categoriesApi(this.catcategoriesObj)
    console.log(res.data.data)
    this.data = res.data.data
  },
  data () {
    return {
      categoriesObj: {
        type: 3,
        pagenum: 1,
        pagesize: 10
      },
      currentPage4: 4,
      props: {
        expandType: false,
        selectionType: false
      },
      data: [],
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name',
          width: '500px'
        },
        {
          label: '是否有效',
          type: 'template',
          template: 'level',
          minWidth: '50px'
        },
        {
          label: '排序',
          prop: 'cat_level'
        },
        {
          label: '操作',
          type: 'template',
          template: 'likes'
        }
      ]
    }
  },
  computed: {
    propList () {
      return Object.keys(this.props).map(item => ({
        name: item
      }))
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style scoped>

</style>
